<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.3.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/yuwanzi.io/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/yuwanzi.io/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/yuwanzi.io/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/yuwanzi.io/images/logo.svg" color="#222">

<link rel="stylesheet" href="/yuwanzi.io/css/main.css">



<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/css/all.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css">

<script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"suyuhuan.gitee.io","root":"/yuwanzi.io/","images":"/yuwanzi.io/images","scheme":"Muse","version":"8.2.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"Suche...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"}};
  </script>
<meta name="description" content="面试中经常遇见BFC相关问题，经常问什么情况下会触发BFC，网络博客中也有很多文章提及BFC，至少我看过后，浏览器是如何在正常流下排版元素的，而BFC和IFC在排版元素的时候又是扮演什么角色这部分内容都是没有介绍的。所以搞懂BFC和IFC必须的从浏览器排版前的基础概念讲起。  什么是标签、元素、盒关于标签、元素、盒的的概念，基本上对应着html文本、生成DOM和CSSOM、layout。文本阶段">
<meta property="og:type" content="article">
<meta property="og:title" content="一秒搞懂什么是BFC，告别面试窘境">
<meta property="og:url" content="https://suyuhuan.gitee.io/yuwanzi.io/2020/11/07/2020-11-07-%E4%B8%80%E7%A7%92%E6%90%9E%E6%87%82%E4%BB%80%E4%B9%88%E6%98%AFBFC/index.html">
<meta property="og:site_name" content="玉丸子 | Blog">
<meta property="og:description" content="面试中经常遇见BFC相关问题，经常问什么情况下会触发BFC，网络博客中也有很多文章提及BFC，至少我看过后，浏览器是如何在正常流下排版元素的，而BFC和IFC在排版元素的时候又是扮演什么角色这部分内容都是没有介绍的。所以搞懂BFC和IFC必须的从浏览器排版前的基础概念讲起。  什么是标签、元素、盒关于标签、元素、盒的的概念，基本上对应着html文本、生成DOM和CSSOM、layout。文本阶段">
<meta property="og:locale">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ba0e9e9782541688b464b0783352306~tplv-k3u1fbpfcp-zoom-1.image">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e8aba0802574989b9dbe284e468b1b5~tplv-k3u1fbpfcp-zoom-1.image">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e431bb5d708a449b883e7623c928c469~tplv-k3u1fbpfcp-zoom-1.image">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e7e1f6095d434fa1b120181390b646ab~tplv-k3u1fbpfcp-zoom-1.image">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cd070fe7e6364f6ea8b36fcb4d709cc7~tplv-k3u1fbpfcp-zoom-1.image">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa84f9cafba3486d8d1142c766bc77a7~tplv-k3u1fbpfcp-zoom-1.image">
<meta property="article:published_time" content="2020-11-07T00:55:00.000Z">
<meta property="article:modified_time" content="2020-11-07T00:58:17.000Z">
<meta property="article:author" content="玉丸子">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="浏览器">
<meta property="article:tag" content="2020">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ba0e9e9782541688b464b0783352306~tplv-k3u1fbpfcp-zoom-1.image">


<link rel="canonical" href="https://suyuhuan.gitee.io/yuwanzi.io/2020/11/07/2020-11-07-%E4%B8%80%E7%A7%92%E6%90%9E%E6%87%82%E4%BB%80%E4%B9%88%E6%98%AFBFC/">


<script class="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh'
  };
</script>
<title>一秒搞懂什么是BFC，告别面试窘境 | 玉丸子 | Blog</title>
  




  <noscript>
  <style>
  body { margin-top: 2rem; }

  .use-motion .menu-item,
  .use-motion .sidebar,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header {
    visibility: visible;
  }

  .use-motion .header,
  .use-motion .site-brand-container .toggle,
  .use-motion .footer { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle,
  .use-motion .custom-logo-image {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line {
    transform: scaleX(1);
  }

  .search-pop-overlay, .sidebar-nav { display: none; }
  .sidebar-panel { display: block; }
  </style>
</noscript>

<link rel="alternate" href="/yuwanzi.io/atom.xml" title="玉丸子 | Blog" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Navigationsleiste an/ausschalten" role="button">
    </div>
  </div>

  <div class="site-meta">

    <a href="/yuwanzi.io/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">玉丸子 | Blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>







</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          Inhaltsverzeichnis
        </li>
        <li class="sidebar-nav-overview">
          Übersicht
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E6%A0%87%E7%AD%BE%E3%80%81%E5%85%83%E7%B4%A0%E3%80%81%E7%9B%92"><span class="nav-number">1.</span> <span class="nav-text">什么是标签、元素、盒</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BA%A7%E7%94%9F%E7%9B%92%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="nav-number">2.</span> <span class="nav-text">浏览器产生盒的过程</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B3%E4%BA%8E%E7%9B%92%E6%A8%A1%E5%9E%8B"><span class="nav-number">3.</span> <span class="nav-text">关于盒模型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%86%8D%E8%B0%88BFC%E5%92%8CIFC"><span class="nav-number">4.</span> <span class="nav-text">再谈BFC和IFC</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%80%E5%90%8E%E6%98%AF%E8%A7%A6%E5%8F%91BFC%E8%BF%98%E6%98%AFBFC%E4%B8%8A%E6%96%87%E5%90%88%E5%B9%B6%EF%BC%8C%E4%B8%80%E9%94%A4%E5%AE%9A%E9%9F%B3%E4%BA%86%E3%80%82"><span class="nav-number">5.</span> <span class="nav-text">最后是触发BFC还是BFC上文合并，一锤定音了。</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%8A%E4%B8%8B%E6%96%87%E5%90%88%E5%B9%B6%E7%9A%84%E6%A0%97%E5%AD%90"><span class="nav-number">5.1.</span> <span class="nav-text">上下文合并的栗子</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%8A%E4%B8%8B%E6%96%87%E5%90%88%E5%B9%B6%E4%B8%8Efloat%E6%A0%97%E5%AD%90"><span class="nav-number">5.2.</span> <span class="nav-text">上下文合并与float栗子</span></a></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">玉丸子</p>
  <div class="site-description" itemprop="description">这里是玉丸子的个人博客,与你一起发现更大的世界。</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/yuwanzi.io/archives">
          <span class="site-state-item-count">68</span>
          <span class="site-state-item-name">Artikel</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/yuwanzi.io/categories/">
        <span class="site-state-item-count">39</span>
        <span class="site-state-item-name">Kategorien</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/yuwanzi.io/tags/">
        <span class="site-state-item-count">46</span>
        <span class="site-state-item-name">schlagwörter</span></a>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh">
    <link itemprop="mainEntityOfPage" href="https://suyuhuan.gitee.io/yuwanzi.io/2020/11/07/2020-11-07-%E4%B8%80%E7%A7%92%E6%90%9E%E6%87%82%E4%BB%80%E4%B9%88%E6%98%AFBFC/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/yuwanzi.io/images/avatar.gif">
      <meta itemprop="name" content="玉丸子">
      <meta itemprop="description" content="这里是玉丸子的个人博客,与你一起发现更大的世界。">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="玉丸子 | Blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          一秒搞懂什么是BFC，告别面试窘境
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Veröffentlicht am</span>
      

      <time title="Erstellt: 2020-11-07 08:55:00 / Geändert am: 08:58:17" itemprop="dateCreated datePublished" datetime="2020-11-07T08:55:00+08:00">2020-11-07</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">in</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/yuwanzi.io/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
        </span>
          . 
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/yuwanzi.io/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">浏览器</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <blockquote>
<p>面试中经常遇见BFC相关问题，经常问什么情况下会触发BFC，网络博客中也有很多文章提及BFC，至少我看过后，浏览器是如何在正常流下排版元素的，而BFC和IFC在排版元素的时候又是扮演什么角色这部分内容都是没有介绍的。所以搞懂BFC和IFC必须的从浏览器排版前的基础概念讲起。</p>
</blockquote>
<h2 id="什么是标签、元素、盒"><a href="#什么是标签、元素、盒" class="headerlink" title="什么是标签、元素、盒"></a>什么是标签、元素、盒</h2><p>关于标签、元素、盒的的概念，基本上对应着html文本、生成DOM和CSSOM、layout。文本阶段我们把每个闭合或自闭合元素(token)称为标签，通过文本解析(Parse)后生成DOM树一个个的节点称为元素（DOM元素）、之后通过解析后CSSRule(这个过程往往是流式处理的字符流-token流-生成元素及css匹配计算)，匹配到对应的元素节点上，计算排版得到元素所占据的大小位置，也就是所谓的盒。</p>
<p>至少目前，我们应该知道盒是浏览器排版元素基本单位。</p>
<h2 id="浏览器产生盒的过程"><a href="#浏览器产生盒的过程" class="headerlink" title="浏览器产生盒的过程"></a>浏览器产生盒的过程</h2><p>在css标准中有 block-level elements 和 inline-level elements 两个就是我们所说块级元素和行内元素。</p>
<p>在正常流排版中每个块级元素独占一行、逐行排版的， 每个行内元素或文字依次排列，容不下换行依次排列的。</p>
<p>现在，如果站在产生盒的过程，我们把元素的排版大概如下步骤：</p>
<ul>
<li>当遇到块级元素：会产生一个block-level-boxs 块盒， 块盒上下排列。</li>
<li>当遇到行内级元素或者文字： 会产生一个inline-boxs 行盒，当容器容不下元素时，会创建新的行盒依次排列新的行内元素。</li>
</ul>
<p>至少目前盒和元素关系，应该是元素根据自身类型会产生盒，一个块级元素会产生一个块级盒独占一行，而多个行内元素至少会产生一个或多个行盒，多个行盒依次上下排列。一段文本会产生一个或多个行盒。</p>
<ul>
<li>block-level-boxs</li>
<li>inline-boxs</li>
</ul>
<h2 id="关于盒模型"><a href="#关于盒模型" class="headerlink" title="关于盒模型"></a>关于盒模型</h2><p>有了盒，不得不说下一个我们很熟悉的概念盒模型<br>块级盒模型如下如：<br><img src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ba0e9e9782541688b464b0783352306~tplv-k3u1fbpfcp-zoom-1.image"></p>
<p>行模型如下图：<br><img src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e8aba0802574989b9dbe284e468b1b5~tplv-k3u1fbpfcp-zoom-1.image"></p>
<p>至少盒模型包括元素margin、padding、border、content的内容</p>
<p>而行模型涉及行的line-height、top、bottom、middle、text-top、text-bottom、base-line相关概念，也对应css vertical-align相关属性值。</p>
<h2 id="再谈BFC和IFC"><a href="#再谈BFC和IFC" class="headerlink" title="再谈BFC和IFC"></a>再谈BFC和IFC</h2><ul>
<li>我们知道了标签、元素、盒的概念和关系。</li>
<li>我们知道了元素产生盒的过程。</li>
</ul>
<p>接下浏览器选择相应盒模型，计算得出盒所占据位置大小、盒与盒之间的留白等信息。<br>然而不管BFC还是IFC都有一个contex当前所依赖状态，而这个状态根据元素有子元素和父元素的关系， 而元素又会产生盒的关系， 所谓Context应该就是当前排版盒所依赖父级盒block-container。</p>
<p>盒在排版时有其依赖上下文环境父级盒，而其内部或者元素内部又可以产生新的盒，根据盒模型对这些新的盒进行排版，从而产生新的上下文环境就是所谓BFC和IFC了。</p>
<p>而当前BFC和IFC依赖上下文环境， 父级盒则称为block-containers。站在元素角度就是，一个元素内部可以继续按照正常流排版，这个元素所产生的盒为block-containers。</p>
<h2 id="最后是触发BFC还是BFC上文合并，一锤定音了。"><a href="#最后是触发BFC还是BFC上文合并，一锤定音了。" class="headerlink" title="最后是触发BFC还是BFC上文合并，一锤定音了。"></a>最后是触发BFC还是BFC上文合并，一锤定音了。</h2><p>讲清楚之前，我们还是看具体例子来做演示，来看看所谓触发BFC例子，如下图：<br><img src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e431bb5d708a449b883e7623c928c469~tplv-k3u1fbpfcp-zoom-1.image"><br>从上图，每个元素的上下间距为20px, 这也侧面margin设计的时候被当做了元素间留白，元素间margin不会被叠加。</p>
<h3 id="上下文合并的栗子"><a href="#上下文合并的栗子" class="headerlink" title="上下文合并的栗子"></a>上下文合并的栗子</h3><p><img src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e7e1f6095d434fa1b120181390b646ab~tplv-k3u1fbpfcp-zoom-1.image"><br>去除父级display hidden 属性值之后， 子元素留白空间跟父级别元素留白发生合并，也就是父元素所在BFC和子元素所在BFC发生合并。</p>
<p>我们看文档定义：<br><img src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cd070fe7e6364f6ea8b36fcb4d709cc7~tplv-k3u1fbpfcp-zoom-1.image"><br>总结一下文档意思：盒内不会创建新的格式化上下文的情况只有一种，自身为Block conatiner盒 且是为block box的盒，加上元素dispaly 属性为visible时候，盒内不会有新的格式化上下文环境产生。 大白话：块级元素display为visible时候盒父级格式化上下文环境发生合并， 子元素margin和父级元素margin发生折叠（这里我们把文档定义反过来解释，就容易理解多了。）。 </p>
<h3 id="上下文合并与float栗子"><a href="#上下文合并与float栗子" class="headerlink" title="上下文合并与float栗子"></a>上下文合并与float栗子</h3><p><img src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa84f9cafba3486d8d1142c766bc77a7~tplv-k3u1fbpfcp-zoom-1.image"></p>
<p>至此我们BFC就讲完了， 总结一下涉及概念</p>
<ul>
<li>标签、元素、盒</li>
<li>盒模型、行模型</li>
<li>BFC、IFC</li>
<li>block-level boxs inline-level boxs block-level element inline-level element</li>
<li>block-box、block-container</li>
</ul>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/yuwanzi.io/tags/%E5%89%8D%E7%AB%AF/" rel="tag"># 前端</a>
              <a href="/yuwanzi.io/tags/%E6%B5%8F%E8%A7%88%E5%99%A8/" rel="tag"># 浏览器</a>
              <a href="/yuwanzi.io/tags/2020/" rel="tag"># 2020</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/yuwanzi.io/2019/08/24/2019-08-24-Life-of-a-Pixel-2018/" rel="prev" title="Life-of-a-Pixel-2018">
                  <i class="fa fa-chevron-left"></i> Life-of-a-Pixel-2018
                </a>
            </div>
            <div class="post-nav-item">
            </div>
          </div>
    </footer>
  </article>
</div>







<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      const commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">玉丸子</span>
</div>
  <div class="powered-by">Erstellt mit  <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a>
  </div>

    </div>
  </footer>

  
  <script src="//cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<script src="/yuwanzi.io/js/utils.js"></script><script src="/yuwanzi.io/js/motion.js"></script><script src="/yuwanzi.io/js/schemes/muse.js"></script><script src="/yuwanzi.io/js/next-boot.js"></script>

  






  





</body>
</html>
